<template>
	<div class="loginbBody">
		<div class="loginDiv">
			<div class="login-content">
				<h1 class="login-title">用户登录</h1>
				<el-form ref="loginForm" :model="loginForm" label-width="100px" :rules="rules">
					<el-form-item label="名字" prop="username">
						<el-input v-model="loginForm.username" style="width: 200px" type="text" autocomplete="off" size="small"></el-input>
					</el-form-item>
					<el-form-item label="密码" prop="password">
						<el-input v-model="loginForm.password" style="width: 200px" type="password" show-password autocomplete="off" size="small"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="confirm">确 定</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>

<!-- <script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter()
const onBack = () => {
	router.back()
}
const confirm = () => {
	router.replace('/index')
}
</script> -->
<!-- @ts-ignore -->
<script lang="ts">
import { loginService } from '@/api/login'

export default {
	name: 'Login',
	data() {
		return {
			loginForm: {
				username: '',
				password: ''
			} as any,
			rules: {
				username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
				password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
			}
		}
	},
	methods: {
		async confirm() {
			// @ts-ignore
			this.$refs.loginForm?.validate(async (valid: any) => {
				if (valid) {
					// @ts-ignore
					const res = await loginService(this.loginForm)
					const token = res.data
					localStorage.setItem('Authorization', token)

					// @ts-ignore
					this.$router.replace('/')
				}
			})
		}
	}
}
</script>

<style scoped>
.loginbBody {
	width: 100%;
	height: 100%;
	background-color: #b3c0d1;
}

.loginDiv {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -200px;
	margin-left: -250px;
	width: 450px;
	height: 330px;
	background: #fff;
	border-radius: 5%;
}

.login-title {
	margin: 20px 0;
	text-align: center;
}

.login-content {
	width: 400px;
	height: 250px;
	position: absolute;
	top: 25px;
	left: 25px;
}
</style>
